<template>
    <div>
      <div id="expense-task-bar" style="height:120px"></div>
    </div>
  </template>

  <script>
  import * as echarts from 'echarts'
  export default {
    data () {
      return {
      }
    },
    computed: {
      options () {
        return {
          title: {
            text: ''
          },
          grid: {
            top: '0',
            bottom: '20%'
          },
          xAxis: {
            type: 'category',
            data: ['1.22', '1.23', '1.24', '1.25', '1.26', '1.27', '1.28'],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#33317E'
              }
            },
            axisTick: {
              show: false // 隐藏X轴刻度尺
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#33317E' // 线条颜色
              }
            },
            axisLabel: {
              color: '#333333'
            }
          },
          yAxis: {
            show: false,
            type: 'value',
            name: '',
            nameTextStyle: {
              color: '#333333'
            },
            axisLine: {
              lineStyle: {
                color: '#33317E'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#33317E' // 线条颜色
              }
            },
            axisLabel: {
              color: '#333333'
            },
            itemStyle: {
              color: '#333333'
            }
          },
          tooltip: {
            formatter (v) {
              const val = v[0].name.split(',')
              return `${val[0]} (${v[0].value})`
            }
          },
          series: [{
                     name: 'CPU',
                     type: 'bar',
                     barWidth: 6,
                     itemStyle: {
                       normal: {
                         barBorderRadius: [2, 2, 0, 0],
                         color: new echarts.graphic.LinearGradient(
                           0, 0, 0, 1,
                           [
                             { offset: 0, color: '#918EF2' },
                             { offset: 1, color: '#34327F' }
                           ]
                         )
                       }
                     },
                     data: [3000, 2000, 1500, 2500, 1800, 2800, 2600, 3500, 3200, 3000, 2500, 2000, 1800]
                   },
                   {
                     name: 'GPU',
                     type: 'bar',
                     barWidth: 6,
                     itemStyle: {
                       normal: {
                         barBorderRadius: [2, 2, 0, 0],
                         color: new echarts.graphic.LinearGradient(
                           0, 0, 0, 1,
                           [
                             { offset: 0, color: '#F37711' },
                             { offset: 1, color: '#F3C908' }
                           ]
                         )
                       }
                     },
                     data: [2000, 1000, 500, 1500, 1200, 2300, 2600, 3500, 3200, 3000, 2500, 2000, 1800]
                   },
                   {
                     name: '其他',
                     type: 'bar',
                     barWidth: 6,
                     itemStyle: {
                       normal: {
                         barBorderRadius: [2, 2, 0, 0],
                         color: new echarts.graphic.LinearGradient(
                           0, 0, 0, 1,
                           [
                             { offset: 0, color: '#1858F4' },
                             { offset: 1, color: '#79B8FF' }
                           ]
                         )
                       }
                     },
                     data: [500, 200, 500, 500, 800, 599, 600, 500, 3200, 3000, 2500, 2000, 1800]
                   }

          ]
          // series: [
          //   {
          //     type: 'bar',
          //     barWidth: 20,
          //     itemStyle: {
          //       normal: {
          //         barBorderRadius: [4, 4, 0, 0],
          //         color: new echarts.graphic.LinearGradient(
          //           0, 0, 0, 1,
          //           [
          //             { offset: 0, color: '#918EF2' },
          //             { offset: 1, color: '#34327F' }
          //           ]
          //         )
          //       }
          //     }
          //   }
          // ]
        }
      }
    },
    mounted () {
      const myChart = echarts.init(document.getElementById('expense-task-bar'))
      myChart.setOption(this.options)
    }
  }
  </script>

  <style lang="scss" scoped>
  </style>
